<template>
  <div class="feedbacks-container">
    <div class="page-header">
      <h2>反馈管理</h2>
      <p>管理公众监督员提交的反馈信息</p>
    </div>
    
    <el-card>
      <template #header>
        <div style="display: flex; align-items: center; justify-content: space-between;">
          <span>反馈列表</span>
          <el-button type="primary" @click="refreshData">
            刷新
          </el-button>
        </div>
      </template>
      
      <div class="table-container">
        <el-table :data="feedbacks" style="width: 100%">
          <el-table-column prop="id" label="ID" width="80" />
          <el-table-column prop="feedbackInfo" label="反馈信息" show-overflow-tooltip />
          <el-table-column prop="location" label="位置" width="120" />
          <el-table-column prop="time" label="时间" width="180" />
          <el-table-column prop="state" label="状态" width="100">
            <template #default="scope">
              <el-tag :type="getStatusType(scope.row.state)">
                {{ getStatusText(scope.row.state) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120">
            <template #default="scope">
              <el-button size="small" @click="handleAssign(scope.row)">
                分配
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { useStore } from 'vuex'

export default {
  name: 'AdminFeedbacks',
  setup() {
    const store = useStore()
    const feedbacks = ref([])
    
    const getStatusType = (state) => {
      const types = {
        0: 'info',
        1: 'warning',
        2: 'success'
      }
      return types[state] || 'info'
    }
    
    const getStatusText = (state) => {
      const texts = {
        0: '待分配',
        1: '已分配',
        2: '已确认'
      }
      return texts[state] || '未知'
    }
    
    const refreshData = async () => {
      try {
        const data = await store.dispatch('data/getFeedbacks')
        feedbacks.value = data
      } catch (error) {
        console.error('Failed to load feedbacks:', error)
      }
    }
    
    const handleAssign = (row) => {
      // TODO: 实现分配逻辑
      console.log('Assign feedback:', row)
    }
    
    onMounted(() => {
      refreshData()
    })
    
    return {
      feedbacks,
      getStatusType,
      getStatusText,
      refreshData,
      handleAssign
    }
  }
}
</script>

<style lang="scss" scoped>
.feedbacks-container {
  padding: 20px;
}

.page-header {
  margin-bottom: 20px;
  
  h2 {
    margin: 0 0 8px 0;
    color: #333;
  }
  
  p {
    margin: 0;
    color: #666;
  }
}

.table-container {
  margin-top: 20px;
}
</style> 